<template>
  <section>
    <!--工具条-->
    <el-row>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true">
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="commitData">{{$t('message.confirm')}}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--列表-->
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-table
          :data="tableData1"
          :border="true"
          :header-cell-style="headStyle"
          :cell-style="headStyle"
          v-loading="tableDataLoading" style="width: 90%">
          <el-table-column label="对冲账户余额">
            <el-table-column
              prop="asset"
              label="币种">
            </el-table-column>
            <el-table-column
              prop="balance"
              label="余额">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-table
          :data="tableData2"
          :border="true"
          :header-cell-style="headStyle"
          :cell-style="headStyle"
          v-loading="tableDataLoading" style="width: 90%">
          <el-table-column label="机器人账户余额">
            <el-table-column
              prop="asset"
              label="币种">
            </el-table-column>
            <el-table-column
              prop="balance"
              label="余额">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-table
          :data="tableData3"
          :border="true"
          :header-cell-style="headStyle"
          :cell-style="headStyle"
          v-loading="tableDataLoading" style="width: 90%">
          <el-table-column label="安全账户&博士账户余额">
            <el-table-column
              prop="asset"
              label="币种">
            </el-table-column>
            <el-table-column
              prop="balance"
              label="余额">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div></el-col>
    </el-row>
  </section>
</template>

<script>
import { balenceStat } from '../api/api'

export default {
  data () {
    return {
      date: '',
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableDataLoading: false
    }
  },
  created () {
  },
  methods: {
    getData (time) {
      this.tableDataLoading = true
      balenceStat({time}).then((res) => {
        console.log(res.data.result)
        if (res.data.code && res.data.code !== 0) {
          this.$message.error('获取失败')
        }
        this.tableData1 = res.data.result.filter(item => item.type === 0)
        this.tableData2 = res.data.result.filter(item => item.type === 1)
        this.tableData3 = res.data.result.filter(item => item.type === 2)
        this.tableDataLoading = false
      }).catch((res) => {
        console.log(res)
      })
    },
    commitData () {
      let date = this.date
      if (date === '') {
        this.$message.error('请选择时间')
      } else {
        this.getData(date.getTime() / 1000)
      }
    },
    headStyle () {
      return {
        textAlign: 'center'
      }
    }
  },
  computed: {
    unit () {
      return this.value
    }
  },
  mounted () {
  }
}

</script>

<style scoped lang="scss">
  .pagination {
    overflow: hidden;
    margin-top: 20px;
    div {
      float: right;
      width: 400px;
    }
  }
 .item {
   display: flex;
   justify-content: space-between;
 }
  .tables {
    display: flex;
    justify-content: space-between;
  }
</style>
